<template>
  <div class="newmv">
    <div class="filter">
      <span class="title">地区：</span>
      <ul class="tab-wrap">
        <li v-for="item,index in area"
            :key="index"
            :class="[item===selectArea?'tab-item action':'tab-item']"
            @click="changeArea(item)">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="filter">
      <span class="title">类型：</span>
      <ul class="tab-wrap">
        <li v-for="item,index in type"
            :key="index"
            :class="[item===selectType?'tab-item action':'tab-item']"
            @click="changeType(item)">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="filter">
      <span class="title">排序：</span>
      <ul class="tab-wrap">
        <li v-for="item,index in order"
            :key="index"
            :class="[item===selectOrder?'tab-item action':'tab-item']"
            @click="changeOrder(item)">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="limit"
                     layout="total, prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
    <div class="mv-list-wrap">
      <mvcard v-for="item,index in mvList"
              :key="index"
              :img='item.cover'
              :playCount='item.playCount'
              :duration='item.duration'
              :title="item.name"
              :artistName='item.artistName'></mvcard>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="limit"
                     layout="total, prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import mvcard from '@/components/mvcard'
import { getNewMv } from '@/network/newmv'
export default {
  components: {
    mvcard
  },
  data () {
    return {
      mvList: [],
      // 单页显示数量
      limit: 40,
      // 从第几条开始查询 比如当前是第1页 每页30个 则offset = 1*30 - 30 从第0个开始。如果是第2页 则 offset = 2*30 - 30 从第30个开始查询
      offset: 0,
      // 播放列表总数
      total: 0,
      // 当前所在页
      currentPage: 1,
      // 地区：
      area: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
      // 类型：
      type: ['全部', '官方版', '原声', '现场版', '网易出品'],
      // 排序：
      order: ['上升最快', '最热', '最新'],
      selectArea: '全部',
      selectType: '全部',
      selectOrder: '上升最快'
    }
  },
  created () {
    this.getNewMvList()
  },
  mounted () { },
  methods: {
    getNewMvList () {
      this.offset = (this.currentPage - 1) * this.limit
      getNewMv(this.limit, this.offset, this.selectArea, this.selectType, this.selectOrder).then(res => {
        if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
        this.mvList = res.data
        if (res.count) {
          this.total = res.count
        }
      })
    },
    changeArea (area) {
      this.selectArea = area
      this.currentPage = 1
      this.getNewMvList()
    },
    changeType (type) {
      this.selectType = type
      this.currentPage = 1
      this.getNewMvList()
    },
    changeOrder (order) {
      this.selectOrder = order
      this.currentPage = 1
      this.getNewMvList()
    },
    // 下一页
    handleCurrentChange () {
      // TODO返回顶部
      this.getNewMvList()
    }
  }
}
</script>
 <style lang='less' scoped>
.newmv {
  .filter {
    display: flex;
    align-items: center;
    font-size: 0.087848rem;
    color: #7f7f81;
    .title {
      font-size: 0.102489rem;
      margin: 0 0.087848rem;
      padding: 0.087848rem 0;
      white-space: nowrap;
    }
    .tab-wrap {
      display: flex;
      padding: 0;
      .tab-item {
        margin: 0 0.087848rem;
        padding: 0.087848rem 0;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          color: #f55050;
        }
      }
      .action {
        color: red;
      }
    }
  }
  .mv-list-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pagination {
    // display: flex;
    // justify-content: flex-end;
    margin: 0.146413rem 0.087848rem;
    /deep/ .el-pagination .el-pager {
      .active {
        color: red;
      }
      li:hover {
        color: #f55050;
      }
    }
  }
}
</style>
